import React, { Component } from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import { bindActionCreators } from 'redux'
import { connect} from 'react-redux'
import { hashHistory } from 'react-router'

import * as userInfoActions from '../../actions/userInfoAction'
import CityHeader from '../../components/CityHeader'
import CurrentCity from '../../components/CurrentCity'
import CityList from '../../components/CityList'
import { CITYNAME } from '../../config/localStorageKeys'
import localStore from '../../util/localStore'

class City extends Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }

  changeCity(newCity) {
    const userInfo = this.props.userInfo;
    userInfo.cityName = newCity;
    // 修改redux
    this.props.userInfoActions.update(userInfo);
    // 修改localstore
    localStore.setItem(CITYNAME, newCity);
    //页面跳转
    hashHistory.push('/');
  }

  render() {
    return (
      <div>
        <CityHeader title="选择城市"/>
        <CurrentCity currentCity={this.props.userInfo.cityName}/>
        <CityList changeCityFn={this.changeCity.bind(this)}/>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    userInfo: state.userInfo
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    userInfoActions: bindActionCreators(userInfoActions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(City)
